<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增产品')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">分类：</label>
            <div class="col-sm-8">
                <select name="categoryId" id="categoryId" class="form-control m-b">
                    <option value="0">请选择分类</option>
                    <option th:each="category : ${categorys}" th:value="${category.categoryId}"
                            th:text="${category.categoryName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">属性</label>
            <div class="col-sm-8">
                <select id="property" name="property" class="form-control select2-multiple" multiple>
                    <option value="">请选择属性</option>
                </select>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">产品名称：</label>
            <div class="col-sm-8">
                <input name="productName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">标题：</label>
            <div class="col-sm-8">
                <input name="subtitle" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">产品封面：</label>
            <div class="col-sm-8">
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 140px; height: 180px;">
                        <img th:src="*{coverImg}">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail"
                         style="max-width: 200px; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span
                                class="fileinput-exists">更改</span><input id="icon" type="file"></span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
                <input name="coverImg" id="coverImg" class="form-control" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">产品详情：</label>
            <div class="col-sm-8">
                <div class="summernote" >

                </div>

            </div>
            <input name="content" id="content" type="hidden">
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">库存：</label>
            <div class="col-sm-8">
                <input name="stock" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否上架：</label>
            <div class="col-sm-8">
                <select id="status" name="status" class="form-control select2-multiple">
                    <option value="0">否</option>
                    <option value="1">是</option>
                </select>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">销售量：</label>
            <div class="col-sm-8">
                <input name="sales" class="form-control" type="number" >
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">价格：</label>
            <div class="col-sm-8">
                <input name="price" class="form-control" type="number">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">会员优惠价：</label>
            <div class="col-sm-8">
                <input name="memberShipPrice" class="form-control" type="number">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script type="text/javascript">
    var prefix = ctx + "mall/product"
    $("#form-product-add").validate({
        focusCleanup: true
    });
    $('#icon').on('change.bs.fileinput ', function (e) {
        var formData = new FormData();
        var file = $('#icon')[0].files[0];
        if (file != null) {
            formData.append('file', file);
            formData.append('type', 0);
            console.log(formData.get('file'))
            $.ajax({
                url: ctx + 'common/upload',
                data: formData,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res)
                    if (res.code === 0) {
                        $("#coverImg").val(res.url);
                    } else {
                        $.modal.alertError(res.msg);
                    }

                }
            })
        }


        // 处理自己的业务
    });
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
            callbacks: {
                onChange: function(contents,$editable) {
                    $("#content").val(contents)
                }
            }
        });


    });
    $("#categoryId").change(function (e) {
        console.log(this.value)
        $.ajax({
            url: ctx + 'mall/property/list',
            type: 'post',
            data: {'categoryId': this.value},
            dataType: 'json',
            success: function (res) {
                $("#property").empty()
                $.each(res.rows, function (j, o) {
                    $("#property").append('  <option value="' + o.propertyId + '">' + o.propertyName + '</option>')
                })

            }
        })
    })

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-product-add').serialize());
        }
    }
</script>
</body>
</html>